<template>
    <div class="todo-info">
        <span class="total">{{ total }} items left</span>
        <div class="tab">
            <a v-for="(item, index) in states" :key="index" :class="item == current ? 'current' : ''"
                @click.prevent="handleState(item)">{{ item }}
            </a>
        </div>
        <button @click="handleDelC">Clear Completed</button>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, toRefs } from 'vue'
// 接收父组件传过来的对象
const data = defineProps({
    total: {
        required: true,
        type: Number
    },
})
// 把列表项传给todo
const { total } = toRefs(data)
// 定义state
const states = ref(["all", "active", "completed"])
// 定义state的动态样式
const current = ref("all")
// 传参数
const emit = defineEmits(['state','del'])
// 发送状态给父组件
function handleState(item) {
    current.value = item
    emit('state', item)
}
// 清除已完成
function handleDelC() {
    emit('del')
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/todoinfo.styl';
</style>